<template>
  <div class="demo-inner-divider">基本用法</div>
  <div style="display:flex;">
    <div style="display:flex;align-items: center;">
      <p style="margin-right:10px">默认值</p>
      <e-colorPicker v-model="color" @on-change="onChange" @on-active-change="onActiveChange" @on-open-change="onOopenChange"></e-colorPicker>
    </div>

    <div style="display:flex;align-items: center;">
      <p style="margin:0px 10px">无默认值</p>
      <e-colorPicker v-model="color1"></e-colorPicker>
    </div>
  </div>

  <div class="demo-inner-divider">透明度</div>
  <div>
    <p>开启属性 alpha，可以选择带 Alpha 通道的颜色。</p>
    <e-colorPicker v-model="color" alpha />
  </div>

  <div class="demo-inner-divider">设置属性 hue 为 false，可以禁用色彩选项。</div>
  <div>
    <e-colorPicker v-model="color" :hue="false" />
  </div>

  <div class="demo-inner-divider">颜色预设</div>
  <div>
    <p>开启属性 recommend 可以显示推荐的颜色预设，或设置属性 colors 来自定义预设颜色。</p>
    <!-- <div>
      <e-colorPicker v-model="color3" recommend />
    </div>
    <e-colorPicker v-model="color4" :colors="colors" /> -->
    <div style="display:flex;">
      <div style="display:flex;align-items: center;">
        <p style="margin-right:10px">recommend</p>
        <e-colorPicker v-model="color3" recommend></e-colorPicker>
      </div>

      <div style="display:flex;align-items: center;">
        <p style="margin:0px 10px">无默认值</p>
        <e-colorPicker v-model="color4" :colors="colors" ></e-colorPicker>
      </div>
    </div>
  </div>

  <div class="demo-inner-divider">尺寸</div>
  <div style="display:flex;">
    <div style="display:flex;align-items: center;">
      <p style="margin-right:10px" >大</p>
      <e-colorPicker v-model="color3" recommend size="large"></e-colorPicker>
    </div>

    <div style="display:flex;align-items: center;">
      <p style="margin:0px 10px">中</p>
      <e-colorPicker v-model="color4" :colors="colors"></e-colorPicker>
    </div>
    <div style="display:flex;align-items: center;">
      <p style="margin:0px 10px" >小</p>
      <e-colorPicker v-model="color4" :colors="colors" size="small"></e-colorPicker>
    </div>
  </div>
  <colorPickerMd  class="markdown-body"></colorPickerMd>
</template>

<script setup>
import {ref} from "vue"
import colorPickerMd from "../../docs/color-picker.md"
let color=ref('#19be6b')
let color1=ref('')
let color3=ref('#19be6b')
let color4=ref('#19be6b')
let colors=ref(['#311B92', '#512DA8', '#673AB7', '#9575CD', '#D1C4E9'])

const onChange=(value)=>{
  console.log('onChange',value)
}

const onActiveChange=(newValue)=>{
  console.log('onActiveChange',newValue)
}

const onOopenChange=(bool)=>{
  console.log("onOopenChange",bool)
}
</script>
